Trang web cửa hàng trái cây có mã nguồn
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8" />
6 <meta
7 name="viewport"
8 content="width=device-width, initial-scale=1, shrink-to-fit=no"
9 />
10
11 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12 <title>Fruit Shop | Sami ul Haq</title>
13 <!-- Font Awesome -->
14 <script
15 src="https://kit.fontawesome.com/9e2213edf0.js"
16 crossorigin="anonymous"
17 ></script>
18
19 <!-- Custom CSS -->
20 <link rel="stylesheet" href="./css/style.css" />
21 </head>
22
23 <body>
24 <main>
25 <header>
26 <!-- Logo -->
27 <a href="./index.html" class="logo">Fruit Shop</a>
28
29 <!-- Navigation -->
30 <nav>
31 <ul>
32 <li><a href="#">Home</a></li>
33 <li><a href="#">About Us</a></li>
34 <li><a href="#">Contact Us</a></li>
35 </ul>
36 </nav>
37
38 <!-- Search & Cart -->
39 <div class="left-nav">
40 <a href="#"><i class="fas fa-search"></i></a>
41 <a href="#"><i class="fas fa-cart-arrow-down"></i></a>
42 </div>
43
44 <input type="checkbox" id="check" />
45 <label for="check" class="checkbtn">
46 <i class="fas fa-bars"></i>
47 </label>
48 </header>
49
50 <!-- User Input Section -->
51 <section class="user-input">
52 <div class="user-amount">
53 <h1>Submit Your Amount:</h1>
54 <div class="amount">
55 <input id="userAmount" type="text" />
56 <button onclick="submitAmount()">Submit</button>
57 </div>
58 <p>Your Amount Rs: <span id="amountEntered">0</span></p>
59 </div>
60 </section>
61
62 <!-- Products Section -->
63 <section class="products">
64 <div class="product-item">
65 <div class="product-img">
66 <img src="./images/Apple.png" alt="apple" />
67 </div>
68
69 <div class="product-description">
70 <h2 class="product-name"><a href="#">Apple</a></h2>
71
72 <div class="rating">
73 <span>☆</span><span>☆</span><span>☆</span><span>☆</span
74 ><span>☆</span>
75 </div>
76
77 <p id="applePrice">Rs: 10</p>
78 <div class="buttons">
79 <button class="btn-plus" onclick="increaseItem('apple' , 'applePrice')">+</button>
80 <input type="text" id="apple" value="0" />
81 <button class="btn-minus" onclick="decreaseItem('apple' , 'applePrice')">-</button>
82 </div>
83 </div>
84 </div>
85
86 <div class="product-item">
87 <div class="product-img">
88 <img src="./images/Orange.png" alt="apple" />
89 </div>
90
91 <div class="product-description">
92 <h2 class="product-name"><a href="#">Orange</a></h2>
93
94 <div class="rating">
95 <span>☆</span><span>☆</span><span>☆</span><span>☆</span
96 ><span>☆</span>
97 </div>
98
99 <p id="orangePrice">Rs: 20</p>
100 <div class="buttons">
101 <button class="btn-plus" onclick="increaseItem('orange' , 'orangePrice')">+</button>
102 <input type="text" id="orange" value="0" />
103 <button class="btn-minus" onclick="decreaseItem('orange' , 'orangePrice')">-</button>
104 </div>
105 </div>
106 </div>
107
108 <div class="product-item">
109 <div class="product-img">
110 <img src="./images/Mango.png" alt="apple" />
111 </div>
112
113 <div class="product-description">
114 <h2 class="product-name"><a href="#">Mango</a></h2>
115
116 <div class="rating">
117 <span>☆</span><span>☆</span><span>☆</span><span>☆</span
118 ><span>☆</span>
119 </div>
120
121 <p id="mangoPrice">Rs: 30</p>
122 <div class="buttons">
123 <button class="btn-plus" onclick="increaseItem('mango' , 'mangoPrice')">+</button>
124 <input type="text" id="mango" value="0" />
125 <button class="btn-minus" onclick="decreaseItem('mango' , 'mangoPrice')">-</button>
126 </div>
127 </div>
128 </div>
129 </section>
130
131 <div class="amount-details">
132 <h3>Your Total: Rs <span id="userTotalAmount">0</span></h3>
133 <h3>No: Of Items: <span id="numOfItem">0</span></h3>
134 <h3>Your Balance: Rs <span id="balance">0</span></h3>
135 </div>
136 </main>
137
138 <!-- JS File -->
139 <script src="./script/script.js"></script>
140 </body>
141 </html>
